<!doctype html>
<html lang="en">
  <head>
    <!-- lang="en" 用于进网页之后的解析中英文 -->
    <meta charset="utf-8">
    <!--移动端优先的适配 配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS 引入 -->
    <link rel="stylesheet" href="bootstrap.css">

    <title>Hello, world!</title> 
  </head>
  <body>
    <h1>Hello, world!</h1>
 	  <a href="#">我是经过bootstrap化的模板超链接标签</a>
 	  <hr/>
    <!--普通表格-->
    <table class="table">
    	<tr>
    		<th>姓名</th>
    		<th>学号</th>
    		<th>绩点</th>
    	</tr>
    	<tr>
    		<td>刘晨</td>
    		<td>2017</td>
    		<td>5.0</td>
    	</tr>
    </table>
    <hr style="border: 1px black solid;">
    <!--条纹式表格-->
    <table class="table table-striped">
    	<tr>
    		<th>姓名</th>
    		<th>学号</th>
    		<th>绩点</th>
    	</tr>
    	<tr>
    		<td>刘晨</td>
    		<td>2017</td>
    		<td>5.0</td>
    	</tr>
    </table>
    <hr style="border: 1px black solid;">
    <!--带边框的表格-->
    <table class="table table-bordered">
    	<tr>
    		<th>姓名</th>
    		<th>学号</th>
    		<th>绩点</th>
    	</tr>
    	<tr>
    		<td>刘晨</td>
    		<td>2017</td>
    		<td>5.0</td>
    	</tr>
    </table>
    <hr style="border: 1px black solid;">
    <!--鼠标悬停呈灰色显示事件-->
    <table class="table table-hover">
    	<tr>
    		<th>姓名</th>
    		<th>学号</th>
    		<th>绩点</th>
    	</tr>
    	<tr>
    		<td>刘晨</td>
    		<td>2017</td>
    		<td>5.0</td>
    	</tr>
    </table>
    <!--紧缩表格事件  让整个表格更加紧凑-->
    <hr style="border: 1px black solid;">
    <table class="table table-condensed">
    	<tr>
    		<th>姓名</th>
    		<th>学号</th>
    		<th>绩点</th>
    	</tr>
    	<tr>
    		<td>刘晨</td>
    		<td>2017</td>
    		<td>5.0</td>
    	</tr>
    </table>
		<!--单元格 状态类-->
		<table class="table">
			<tr class="active">QGhappy</tr>
			<tr class="success">Estar</tr>
			<tr>
			  <td class="active">诸葛亮</td>
			  <td class="success">花木兰</td>
			  <td class="warning">达摩</td>
			  <td class="danger">孙策</td>
			  <td class="info">孙膑</td>
			</tr>
		</table>
		<!--响应式表格体系 如左右出现框拉-->
		<div class="table-responsive" style="width: 100px;">
			<hr style="border: 1px black solid;">
	    <table class="table table-condensed">
	    	<tr>
	    		<th>姓名</th>
	    		<th>学号</th>
	    		<th>绩点</th>
	    	</tr>
	    	<tr>
	    		<td>刘晨</td>
	    		<td>2017</td>
	    		<td>5.0</td>
	    	</tr>
	    </table>	
		</div>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--
        Bootstrap 自带的很多逻辑 + 样式 都为如a的下划线等常用标签做了最好的配置
    -->
  </body>
</html>